<template>
    <el-dialog
            title=""
            :visible.sync="visible"
            width="60%"
            center
            :close-on-click-modal="false"
    >
<!--      :style="{ 'max-height': '80vh', 'overflow-y': 'auto' }"-->

        <div class="FormsDiv">
          <el-form :model="Form" :rules="rule" ref="Form" label-width="120px" class="demo-ruleForm" :span="24">
            <el-form-item label="上级菜单" :span="12">
              <treeselect v-model="Form.menu_parent_id" :options="options" :multi-select="false" />
            </el-form-item>

            <el-form-item label="菜单名称"  :span="12">
              <el-input v-model="Form.menu_name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>

            <el-form-item label="菜单编码" prop="menu_code" :span="12">
              <el-input v-model="Form.menu_code" placeholder="请输入菜单编码"></el-input>
            </el-form-item>


            <el-form-item label="类型" :span="12">
              <el-radio-group v-model="Form.node_type">
                <el-radio :label="0">菜单栏</el-radio>
                <el-radio :label="1">页面</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="排序" prop="integral" :span="12">
              <el-input-number v-model="Form.sort" :step="1" :min="1" :max="999"></el-input-number>
            </el-form-item>

            <el-form-item label="状态" :span="12">
              <el-radio v-model="Form.is_delete" :label="0" border>激活</el-radio>
              <el-radio v-model="Form.is_delete" :label="1" border>禁用</el-radio>
            </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('Form')">保存</el-button>
              </el-form-item>

          </el-form>
        </div>

    </el-dialog>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { menuSave } from '@/api/api.js'
  import { getMenuRule } from "@/utils/validateFrom";
    export default {
        components:{
          Treeselect
        },
        props:{
            //弹出窗口
            visibleChild: {
                type:Boolean,
                default:false
            },
            childForm:{
                type:Object,
                default(){
                    return {
                        menu_name:"",
                        menu_code:"",
                        node_type:1,
                        sort:0,
                        is_delete:0,
                        menu_parent_id:null,
                    };
                }
            },
            menuId:{
                type:Number,
                default() {
                    return -1;
                }
            },
            tableTree:{
              type:Array,
              default(){
                return [];
              }
            },
        },
        data(){
            return {
                Form:JSON.parse(JSON.stringify(this.childForm)),
                menu_id: this.menuId,
                rule:{
                  menu_code: [
                    {
                      validator: (rule, value, callback) => getMenuRule(rule, value, callback, {
                        menuId: this.menu_id,
                        menuName: this.Form.menu_name
                      }),
                      min: 2,
                      max: 16,
                      required: true,
                      trigger: 'blur'
                    }
                  ]
                },
                fileList: [],
                menu_parent_id: null,
                options: []
            }
        },
        watch:{
            // 这样才能算得上动态监控,不然初始渲染的就会一直保留
            childForm:{
                // 监听数据发生变化的处理函数
                handler(newValue) {
                  console.log("newValue",newValue);
                    this.Form = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
                },
                // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
                deep: true
            },
            menuId:{
                // 监听数据发生变化的处理函数
                handler(newValue) {
                  console.log("menu_id",newValue);
                    this.menu_id = newValue;
                    // this.rule.menu_code["0"].menuId = newValue;
                },
                // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
                deep: true
            },
            tableTree:{
            // 监听数据发生变化的处理函数
            handler(newValue) {
              // console.log('12345',JSON.parse(JSON.stringify(newValue))) ;
              // 将父组件传递过来的树形结构重新加载
              let menuList =  JSON.parse(JSON.stringify(newValue));
              this.options = this.buildOptions(menuList);
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
          },

        },
        computed:{
            visible:{
                get(){
                    return this.visibleChild;
                },
                set(newValue){
                    this.$emit("update:visibleChild",newValue);
                }
            }
        },
        methods: {
            submitForm(){
                this.$refs.Form.validate((validate)=>{
                    if (validate){
                      // console.log("menu_parent_id",this.menu_parent_id);
                      this.Form.menu_parent_id = this.Form.menu_parent_id || 0;
                      this.Form.menu_id = this.menu_id;
                      menuSave(this.Form).then((res) =>{
                            if (res.code === 200){
                                // 重置初始界面
                                this.Form =  {
                                  menu_name:"",
                                  menu_code:"",
                                  node_type:1,
                                  sort:0,
                                  is_delete:0,
                                  menu_parent_id:null,
                                };
                                this.$message.success('保存成功');
                                this.$parent.menu();
                            }
                        }).catch(error =>{
                            this.$message.error(error.message || 'Error');
                        })
                    }else {
                        this.$message.error('错误');
                    }
                })
                //关闭弹窗
                this.visible = false;
            },
            buildOptions(menuList) {
              // 树形无限极循环
              let options = [];
              for (let i = 0; i < menuList.length; i++) {
                let menu = menuList[i];
                let option = {
                  id: menu.menu_id,
                  label: menu.menu_name
                };
                if (menu.children && menu.children.length > 0) {
                  option.children = this.buildOptions(menu.children);
                }
                options.push(option);
              }

              return options;
            }
        },
    }
</script>
